/*
 * @Descriptions: reactApp
 * @version: 1.0
 * @Author: CQY
 * @Date: 2022-04-07 21:51:33
 * @LastEditors: CQY
 * @LastEditTime: 2022-04-08 16:21:21
 */
import React from 'react';

import { Modal,Form,Input,Select,DatePicker } from 'antd';

import moment from 'moment';

import FooterButton from '../footer/FooterButton'

const { Option } = Select;

const PurchaseModal = (props) => {

    const onFinish = (values) => {
        console.log('Success:', values);
      };
    
      const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
      };


      // 下拉选择框事件
      const onGenderChange = (value) => {
        // eslint-disable-next-line default-case
        switch (value) {
          case 'male':
            this.formRef.current.setFieldsValue({
              note: 'Hi, man!',
            });
            return;
          case 'female':
            this.formRef.current.setFieldsValue({
              note: 'Hi, lady!',
            });
            return;
          case 'other':
            this.formRef.current.setFieldsValue({
              note: 'Hi there!',
            });
        }
      };

      const today = moment(); // 当天日期
      // 日期格式
      const dateFormat = 'YYYY/MM/DD';
    return (
        <div>
            <Modal 
            centered 
            title={props.title} 
            visible={props.visible} 
            footer={[
              <FooterButton 
              key='btnBox'
              btn1='保存' 
              btn2='关闭' 
              clickBtn1={props.handleOk}
              clickBtn2={props.onCancel}
               />
               ]}
            // onOk={props.handleOk} 
            onCancel={props.onCancel} 
            // okText='保存' 
            // cancelText='关闭' 
            bodyStyle={{paddingTop:"0",height:"500px",overflowY:"scroll"}}
            >
                <div style={{fontSize:"16px",height:"40px",lineHeight:"40px",fontWeight:"bold"}}>新增商品采购</div>
                <Form
                  size='small'
                  name="basic"
                  labelCol={{
                    span: 6,
                  }}
                  wrapperCol={{
                    span: 18,
                  }}
                  initialValues={{
                    // 新增采购数量
                    addNum:1,
                    // 总折扣
                    TotalDiscount:0,
                    // 总成本
                    TotalCost:0,
                    // 总运费
                    totalFreight:0,
                    // 支付方式
                    payWay:'请选择',
                    // 当前时间
                    date:moment(today),
                  }}
                  onFinish={onFinish}
                  onFinishFailed={onFinishFailed}
                  autoComplete="off"
                >
                  <Form.Item
                    label="商品名称"
                    name="goodsName"
                    rules={[
                      {
                        required: true,
                        message: 'Please input your username!',
                      },
                    ]}
                  >
                    <Input style={{width:"200px",color:"black"}} disabled />
                  </Form.Item>

                  <Form.Item
                    label="规格"
                    name="size"
                   
                  >
                    <Input style={{width:"150px"}} />
                  </Form.Item>

                  <Form.Item
                    name="Model"
                    label="型号"
                    valuePropName="checked"
                  >
                      <Input style={{width:"150px"}} />
                  </Form.Item>

                  <Form.Item
                   label='现有库存'
                   name="storeNum"

                  >
                      <Input style={{width:"200px",color:"black"}} disabled />
                  </Form.Item>

                  <Form.Item
                   label='新增采购数量'
                   name="addNum"
                  >
                      <Input style={{width:"150px"}} />
                  </Form.Item>

                  <Form.Item
                   label='存放仓库'
                   name="storeHave"

                  >
                      <Input style={{width:"200px",color:"black"}} disabled />
                  </Form.Item>

                  <Form.Item
                   label='供应商'
                   name="provider"

                  >
                      <Input style={{width:"200px",color:"black"}} disabled />
                  </Form.Item>

                  <Form.Item
                   label='单价'
                   name="price"

                  >
                      <Input style={{width:"150px"}} />
                  </Form.Item>

                  <Form.Item
                   label='总折扣'
                   name="TotalDiscount"

                  >
                      <Input style={{width:"200px"}} />
                  </Form.Item>


                  <Form.Item
                   label='总成本'
                   name="TotalCost"

                  >
                      <Input style={{width:"200px",color:"black"}} disabled />
                  </Form.Item>

                  <Form.Item
                   label='总运费'
                   name="totalFreight"

                  >
                      <Input style={{width:"150px"}} />
                  </Form.Item>

                  <Form.Item
                   label='支付方式'
                   name="payWay"
                   rules={[
                       {
                           required:true,
                       }
                   ]} 
                  >
                      <Select
                        placeholder="请选择"
                        onChange={()=>onGenderChange()}
                        allowClear
                        style={{ width: 120,color:"black" }}
                      >
                        <Option value="请选择">请选择</Option>
                        <Option value="现金付款">现金付款</Option>
                        <Option value="银行转账">银行转账</Option>
                        <Option value="支付宝">支付宝</Option>
                        <Option value="支票">支票</Option>
                        <Option value="其他">其他</Option>
                      </Select>
                  </Form.Item>

                  <Form.Item
                   label='经办人'
                   name="manager"
                    rules={[
                        {
                            required:true,
                        }
                    ]}
                  >
                      <Input style={{width:"200px",color:"black"}} disabled />
                  </Form.Item>
                
                  <Form.Item
                   label='采购日期'
                   name="date"
                    
                  >
                      <DatePicker showToday format={dateFormat}  placement='topLeft' />
                  </Form.Item>

                  <Form.Item
                   label='订单商品备注'
                   name="ordersRemark"
                    
                  >
                      <Input.TextArea />
                  </Form.Item>

                </Form>
            </Modal>
        </div>
    );
}

export default PurchaseModal;
